<template>
    <div class="nav-box">
        <div
            class="nav-item"
            :class="activeItem == item.navId ? 'active':''"
            v-for="(item,index) of navList"
            :key="index"
            @click="changeNav(item.navId)"
        >{{item.navName}}</div>
    </div>
</template>

<script>
export default {
    name: 'NavBox',
    data () {
        return {
            activeItem: 0,
            navList: [
                {
                    navId: 0,
                    navName: '全部'
                },
                {
                    navId: 1,
                    navName: '人气优先'
                },
                {
                    navId: 2,
                    navName: '价格优先'
                }
            ]
        }
    },
    methods: {
        changeNav (id) {
            this.activeItem = id
            this.$emit('changeNav',id)
        }
    }
}
</script>

<style lang="stylus" scoped>
.nav-box
    display flex
    justify-content space-between
    padding 0 0.9rem
    border-bottom 1px solid #e5e5e5
    background #fff
    .nav-item
        height 1rem
        line-height 1rem
        box-sizing border-box
        font-size 0.38rem
        color #333
    .active
        border-bottom 2px solid #d7463c
        color #d7463c
</style>
